﻿<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

    <!-- META -->
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <!-- PAGE TITLE -->
    <title>Home</title>

    <!-- FAVICON -->
    <link rel="shortcut icon" th:href="@{/static/assets/img/favicon.png}">

    <!-- FONTS -->
    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface%7CArapey&amp;subset=latin-ext" rel="stylesheet">

    <!-- STYLESHEETS -->
    <link rel="stylesheet" th:href="@{/static/assets/css/main.css}">
    <link rel="stylesheet" th:href="@{/static/assets/css/plugins.css}">
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">


</head>


<body>


<!-- PRELOADER -->
<div class="preloader">

    <div class="spinner"></div>

</div>
<!-- /PRELOADER -->


<!-- IMAGE CONTAINER -->
<div class="image-container">

    <div class="background-img"></div>

</div>
<!-- /IMAGE CONTAINER -->


<!-- CONTENT AREA -->
<div class="content-area">


    <!-- CONTENT AREA INNER -->
    <div class="content-area-inner">


        <!-- INTRO -->
        <section id="intro">


            <!-- CONTAINER MID -->
            <div class="container-mid">


                <!-- ANIMATION CONTAINER -->
                <div class="animation-container animation-fade-down" data-animation-delay="0">

                    <h1>SpringMVC从入门到精通</h1>

                </div>
                <!-- /ANIMATION CONTAINER -->


                <!-- ANIMATION CONTAINER -->
                <div class="animation-container animation-fade-left" data-animation-delay="300">

                    <p class="subline">
                        springmvc是基于spring的一个框架，是spring的一个部件，做web的一个框架
                        web底层是servlet，基于此加了一些功能，可以理解成servlet的一个升级->springmvc框架
                        创建对象放入容器中，容器中放置的对象是注解@controller
                    </p>
                </div>
                <!-- /ANIMATION CONTAINER -->

            </div>


        </section>
        <!-- /INTRO -->


        <!-- ABOUT -->
        <section id="about">
            <h3 class="headline scroll-animated-from-right">SpringMVC概述</h3>
            <p class="scroll-animated-from-right">SpringMVC是Spring的一个后续产品，是Spring的一个子项目
                SpringMVC 是 Spring 为表述层开发提供的一整套完备的解决方案。在表述层框架历经 Strust、 WebWork、Strust2
                等诸多产品的历代更迭之后，目前业界普遍选择了 SpringMVC 作为 Java EE 项目 表述层开发的首选方案。
            </p>

        </section>
        <!-- /ABOUT -->


        <!-- SERVICE -->
        <section id="service">


            <h3 class="headline scroll-animated-from-right">相关知识点</h3>


            <!-- SERVICE LIST -->
            <ul class="services-list">


                <li class="scroll-animated-from-right"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                    <a th:href="@{/hello}">hello world</a>
                </li>
                <li class="scroll-animated-from-right"><i class="fa fa-eye" aria-hidden="true"></i>Design Direction</li>
                <li class="scroll-animated-from-right"><i class="fa fa-database" aria-hidden="true"></i>Product Design
                </li>
                <li class="scroll-animated-from-right"><i class="fa fa-television" aria-hidden="true"></i>Web Design
                </li>
                <li class="scroll-animated-from-right"><i class="fa fa-square-o" aria-hidden="true"></i>UI & UX Design
                </li>


            </ul>
            <!-- /SERVICE LIST -->


        </section>
        <!-- /SERVICE -->


        <!-- WORK -->
        <section id="work">


            <h3 class="headline scroll-animated-from-right">My latest Work.</h3>


            <!-- SHOWCASE -->
            <div class="showcase">


                <!-- ITEM -->
                <div class="item scroll-animated-from-right">


                    <!-- LIGHTBOX LINK -->
                    <a href="#" data-featherlight="#item-1-lightbox">


                        <!-- INFO -->
                        <div class="info">


                            <!-- CONTAINER MID -->
                            <div class="container-mid">

                                <h5>Fashion Inc.</h5>
                                <p>Web Design</p>

                            </div>
                            <!-- /CONTAINER MID -->


                        </div>
                        <!-- /INFO -->


                        <div class="background-image" style="background-image: url(assets/img/work/item-1.jpg)"></div>


                    </a>
                    <!-- /LIGHTBOX LINK -->


                    <!-- LIGHTBOX -->
                    <div id="item-1-lightbox" class="work-lightbox">


                        <img class="img-responsive" src="assets/img/work/item-1.jpg" alt="image">

                        <h3>Fashion Inc.</h3>
                        <p class="subline">Web Design</p>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper faucibus eros, quis
                            imperdiet sapien. Nam sodales nec risus nec interdum. Proin lobortis, ex condimentum
                            ultricies eleifend, nisl nunc sollicitudin odio, eget egestas est turpis et metus. In non
                            ligula quis mauris rutrum porta.</p>


                    </div>
                    <!-- /LIGHTBOX -->


                </div>
                <!-- /ITEM -->

                <!-- ITEM -->
                <div class="item scroll-animated-from-right">


                    <!-- LIGHTBOX LINK -->
                    <a href="#" data-featherlight="#item-2-lightbox">


                        <!-- INFO -->
                        <div class="info">


                            <!-- CONTAINER MID -->
                            <div class="container-mid">

                                <h5>Asimov 71</h5>
                                <p>Product Design</p>

                            </div>
                            <!-- /CONTAINER MID -->


                        </div>
                        <!-- /INFO -->


                        <div class="background-image" style="background-image: url(assets/img/work/item-2.jpg)"></div>


                    </a>
                    <!-- /LIGHTBOX LINK -->


                    <!-- LIGHTBOX -->
                    <div id="item-2-lightbox" class="work-lightbox">


                        <img class="img-responsive" src="assets/img/work/item-2.jpg" alt="image">

                        <h3>Asimov 71</h3>
                        <p class="subline">Product Design</p>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper faucibus eros, quis
                            imperdiet sapien. Nam sodales nec risus nec interdum. Proin lobortis, ex condimentum
                            ultricies eleifend, nisl nunc sollicitudin odio, eget egestas est turpis et metus. In non
                            ligula quis mauris rutrum porta.</p>


                    </div>
                    <!-- /LIGHTBOX -->


                </div>
                <!-- /ITEM -->


                <!-- ITEM -->
                <div class="item scroll-animated-from-right">


                    <!-- LIGHTBOX LINK -->
                    <a href="#" data-featherlight="#item-3-lightbox">


                        <!-- INFO -->
                        <div class="info">


                            <!-- CONTAINER MID -->
                            <div class="container-mid">

                                <h5>Hardley &amp; Sons</h5>
                                <p>Design Direction</p>

                            </div>
                            <!-- /CONTAINER MID -->


                        </div>
                        <!-- /INFO -->


                        <div class="background-image" style="background-image: url(assets/img/work/item-3.jpg)"></div>


                    </a>
                    <!-- /LIGHTBOX LINK -->


                    <!-- LIGHTBOX -->
                    <div id="item-3-lightbox" class="work-lightbox">


                        <img class="img-responsive" src="assets/img/work/item-3.jpg" alt="image">

                        <h3>Hardley &amp; Sons</h3>
                        <p class="subline">Design Direction</p>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper faucibus eros, quis
                            imperdiet sapien. Nam sodales nec risus nec interdum. Proin lobortis, ex condimentum
                            ultricies eleifend, nisl nunc sollicitudin odio, eget egestas est turpis et metus. In non
                            ligula quis mauris rutrum porta.</p>


                    </div>
                    <!-- /LIGHTBOX -->


                </div>
                <!-- /ITEM -->


                <!-- ITEM -->
                <div class="item scroll-animated-from-right">


                    <!-- LIGHTBOX LINK -->
                    <a href="#" data-featherlight="#item-4-lightbox">


                        <!-- INFO -->
                        <div class="info">


                            <!-- CONTAINER MID -->
                            <div class="container-mid">

                                <h5>Starnation</h5>
                                <p>UI/UX DESIGN</p>

                            </div>
                            <!-- /CONTAINER MID -->


                        </div>
                        <!-- /INFO -->


                        <div class="background-image" style="background-image: url(assets/img/work/item-4.jpg)"></div>


                    </a>
                    <!-- /LIGHTBOX LINK -->


                    <!-- LIGHTBOX -->
                    <div id="item-4-lightbox" class="work-lightbox">


                        <img class="img-responsive" src="assets/img/work/item-4.jpg" alt="image">

                        <h3>Starnation</h3>
                        <p class="subline">UI/UX DESIGN</p>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper faucibus eros, quis
                            imperdiet sapien. Nam sodales nec risus nec interdum. Proin lobortis, ex condimentum
                            ultricies eleifend, nisl nunc sollicitudin odio, eget egestas est turpis et metus. In non
                            ligula quis mauris rutrum porta.</p>


                    </div>
                    <!-- /LIGHTBOX -->


                </div>
                <!-- /ITEM -->


            </div>
            <!-- /SHOWCASE -->


        </section>
        <!-- /WORK -->


        <!-- CONTACT -->
        <section id="contact">


            <h3 class="headline scroll-animated-from-right">Contact Me.</h3>


            <!-- CONTACT LIST -->
            <ul class="contact-list">

                <li class="scroll-animated-from-right"><i class="fa fa-mobile" aria-hidden="true"></i>XXX</li>
                <li class="scroll-animated-from-right"><i class="fa fa-envelope-o" aria-hidden="true"></i>XXX</li>

            </ul>
            <!-- /CONTACT LIST -->


            <!-- CONTACT FORM -->
            <form id="contact-form" th:action="@{/param/servlet}" method="post">


                <input id="contact-form-name" type="text" name="username" class="form-control scroll-animated-from-right"
                       placeholder="请输入你的用户名">

                <input id="contact-form-email" type="text" name="email" class="form-control scroll-animated-from-right"
                       placeholder="* Your Email">

                <!-- PHANTOM ELEMENT ( HONEYPOT CAPTCHA FOR SECURITY ) -->
                <div class="fhp-input"><input id="contact-form-company" type="text" name="company" class="form-control">
                </div>
                <!-- /PHANTOM ELEMENT ( HONEYPOT CAPTCHA FOR SECURITY ) -->

                <textarea id="contact-form-message" name="message" class="form-control scroll-animated-from-right"
                          placeholder="* Your Message"></textarea>

                <button type="submit" class="form-control scroll-animated-from-right">Send Mail</button>

                <div class="success-message">* The Email was Sent Successfully!</div>


            </form>
            <!-- /CONTACT FORM -->


        </section>
        <!-- /CONTACT -->


        <!-- FOOTER -->
        <section id="footer">


            <!-- SOCIAL ICONS -->
            <ul class="social-icons scroll-animated-from-right">


                <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
                <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>


            </ul>
            <!-- /SOCIAL ICONS -->


            <p class="scroll-animated-from-right">Copyright &copy; 2020.Company name All rights reserved.</p>


        </section>
        <!-- /FOOTER -->


    </div>
    <!-- /CONTENT AREA INNER -->


</div>
<!-- /CONTENT AREA -->


<!-- JAVASCRIPTS -->
<script th:src="@{/static/assets/js/plugins.js}"></script>
<script th:src="@{/static/assets/js/main.js}"></script>
<script th:src="@{/static/layui/layui.js}"></script>

<style>
    .copyrights {
        text-indent: -9999px;
        height: 0;
        line-height: 0;
        font-size: 0;
        overflow: hidden;
    }
</style>
<div class="copyrights" id="links20210126">
    Collect from <a href="http://www.cssmoban.com/" title="网站模板">模板之家</a>
    <a href="http://cooco.net.cn/" title="组卷网">组卷网</a>
</div>
</body>


</html>